<template>
	<view class="add-address-page">
		<!-- #ifndef MP-WEIXIN -->
		<free-nav-bar :textContent="title" isBackShow></free-nav-bar>
		<!-- #endif -->
		<view class="address-form">
			<view class="uni-form-item uni-column">
				<uni-section style="font-size: 28rpx;" class="mb-10" title="收货人">				  
				  <template v-slot:right>
				    <input class="uni-input" v-model="formData.name" placeholder="填写收货人姓名" />
				  </template>
				</uni-section>
			</view>
			<view class="uni-form-item uni-column">
				<uni-section class="mb-10" title="手机号">				  
				  <template v-slot:right>
				    <input class="uni-input" v-model="formData.mobile" placeholder="填写联系手机号码" />
				  </template>
				</uni-section>
			</view>
			<view class="uni-form-item uni-column">
				<uni-section class="mb-10" title="所在城市">				  
				  <template v-slot:right>
				    <uni-data-picker v-model="formData.mapAreaId" :localdata="cityList" 
						popup-title="请选择城市"	placeholder="请选择城市" 
						@change="changeCityHandle" @nodeclick="selectCityHandle">
				    </uni-data-picker>
				  </template>
				</uni-section>
			</view>
			<view class="uni-form-item uni-column address-detail">
				<uni-section class="mb-10" title="详细地址">				  
				  <template v-slot:right>
				    <textarea class="uni-input" v-model="formData.address" maxlength="150" auto-height  placeholder="具体街道、村、楼牌号"/>
				  </template>
				</uni-section>
			</view>			
		</view>
		<view class="default-address">
			<uni-section class="mb-10" title="设置为默认地址">				  
			  <template v-slot:right>
				   <label class="default-address-btn">
					   <radio color="#FD5052" :checked="formData.defaultStatus" @click="setDefaultHandle"/>
					</label>
			  </template>
			</uni-section>
		</view>
		<view class="add-btn-box">
			<button class="add-btn" @click="submitForm">保存</button>
		</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue'
	export default {
		components: {
			freeNavBar,
			uniDataPicker
		},
		data() {
			return {
				title: '添加收货地址',
				cityList: [],
				formData: {
					name: '',
					mobile: '',
					mapAreaId:'',
					areaId:'',
					cityArr:[],
					city: [],
					address: '',
					detailAddress: '',
					defaultStatus: true
				},
				rules:{
					name: 'red'
				}
			}
		},
		onLoad(e) {
			this.formData = {
				name: '',
				mobile: '',
				areaId:'',
				mapAreaId:'',
				cityArr:[],
				city: [],
				address: '',
				detailAddress: '',
				defaultStatus: true
			};			
			this.getCityList(e);
		},
		onShow() {
			// if(this.cityList== null || this.cityList.length == 0) {
			// 	this.getCityList();
			// }
		},
		methods: {
			getCityList(e) {
				let _this = this;
				_this.title = '添加收货地址';				
				$H.get('/infra/city/getCityList').then(res => {					
					_this.cityList = res;
					if(e && e.address) {
						let editAddress = JSON.parse(e.address);
						let city = [];
						if(editAddress.areaName) {
							city = editAddress.areaName.split(" ");
						}
						let address = editAddress.detailAddress;
						if(city && city.length > 0) {
							for(var i = 0; i < city.length; i++) {
								address = address.replace(city[i], "");
							}
						}
						
						_this.formData = {
							id: editAddress.id,
							name: editAddress.name,
							mobile: editAddress.mobile,
							mapAreaId:editAddress.mapAreaId+'',
							areaId:editAddress.areaId,
							cityArr: [],
							city: city,
							address: address,
							detailAddress: '',
							defaultStatus: editAddress.defaultStatus
						};
						_this.title = '修改收货地址';
						console.log(_this.formData)
						console.log(66666)
					}
					uni.setNavigationBarTitle({
						title: _this.title
					});
				})
			},
			changeCityHandle(e) {
				if(e && e.detail && e.detail.value) {
					this.formData.cityArr = e.detail.value;
				}
				else {
					this.formData.cityArr = []
				}
			},
			selectCityHandle(node) {
				console.log(node)
			},
			selectHandle() {
				
			},
			async submitForm() {
				if(this.formData.cityArr != null && this.formData.cityArr.length >2) {
					this.formData.detailAddress = this.formData.cityArr[0].text + this.formData.cityArr[1].text + this.formData.cityArr[2].text + this.formData.address;
					let province = this.formData.cityArr[0].text;
					let city = this.formData.cityArr[1].text;
					let area = this.formData.cityArr[2].text;
					this.formData.city = [];
					this.formData.city.push(province);
					this.formData.city.push(city);
					this.formData.city.push(area);	
					
				}
				if(this.formData.city != null && this.formData.city.length >2 ) {
					this.formData.detailAddress = this.formData.city[0] + this.formData.city[1] + this.formData.city[2] + this.formData.address;
				}
				if(this.validateForm()) {
					let checkAddress = await $U.checkText(this.formData.address);
					let checkName = await $U.checkText(this.formData.name);
					if(checkAddress && checkName) {		
						if(this.formData.id && this.formData.id > 0) {
							$H.post('/member/address/update', this.formData).then(res => {
								if(res) {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}
						else {
							$H.post('/member/address/create', this.formData).then(res => {
								if(res) {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						}
					}
					else {
						uni.showToast({
							title: '监测到您所填内容可能包含违规内容，请更正，谢谢配合！',
							icon: 'none'
						});
					}
					
				}
				console.log(this.formData)
			},
			validateForm() {
				if(this.formData.name == null || this.formData.name == '') {
					uni.showToast({
						title: '请填写收货人姓名',
						icon: 'none'
					});
					return false;
				}
				if(this.formData.mobile == null || this.formData.mobile == '') {
					uni.showToast({
						title: '请填写联系手机号码',
						icon: 'none'
					});
					return false;
				}
				if(this.formData.mobile) {
					if(!$U.isValidPhoneNumber(this.formData.mobile)) {
						uni.showToast({
							title: '请填写正确手机号码',
							icon: 'none'
						});
						return false;
					}
				}
				if(this.formData.city == null || this.formData.city.length == 0) {
					uni.showToast({
						title: '请填写收货人所在城市',
						icon: 'none'
					});
					return false;
				}
				if(this.formData.mapAreaId == null || this.formData.mapAreaId == '') {
					uni.showToast({
						title: '请填写收货人所在城市',
						icon: 'none'
					});
					return false;
				}
				if(this.formData.address == null || this.formData.address == '') {
					uni.showToast({
						title: '请填写收货人详细地址',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			setDefaultHandle() {
				this.formData.defaultStatus = !this.formData.defaultStatus;
			}
		}
	}
</script>

<style lang="scss" scoped>

 .add-address-page {
	 height: 640rpx;
	 overflow-y: hidden;
	 padding-bottom: calc(env(safe-area-inset-bottom) + 90rpx);
	 padding-top: 20rpx;
	 background-color: #F4F4F4;
	 .address-form {
		 position: relative;
		 width: 100%;		 
		 font-size: 28rpx;
		 color: #222222;
		 background-color: #fff;
		 border-top: 1px solid #F3F3F3;
		 .uni-form-item {
			 width: 100%;
			 height: 80rpx;
			 line-height: 45rpx;
			 .form-label {
				position: relative;
			 	width: 120rpx;
				margin-left: 15rpx;
				float: left;
			 }
			 .uni-input {
				 position: relative;
				 width: 75%;
				 float: left;
				 margin-left: 18rpx;
			 }
			 /deep/ .uni-section-header__slot-right {
				 width: 80%;
			 }
			 /deep/ .uni-section__content-title {
				 font-weight: 400;
				 font-size: 28rpx !important;
				 color: #222222 !important;
			 }
			 /deep/ .selected-area {
				 font-size: 16px;
			 }
			 /deep/ .input-value  {
				 border: none;
				 height: 40rpx;
				 line-height: 40rpx;
			 }
		 }
		.address-detail {
			height: auto;
		}
	 }
	.default-address {
		position: relative;
		top:40rpx;
		width: 100%;
		height: 82rpx;
		background-color: #F4F4F4;
		.default-address-btn {
		}
	}
	.add-btn-box {
		position: relative;
		top:100rpx;
		width: 100%;
		.add-btn {
			width: 690rpx;
			height: 74rpx;
			line-height: 75rpx;
			color: #fff;
			background: #FD5052;
			border-radius: 37rpx 37rpx 37rpx 37rpx;
		}
		
	}
 }
</style>
